<template>

    <el-card class="news-form1">
      <template #header>
        <div class="card-header">
          <h2>新闻发布</h2>
        </div>
      </template>
      <el-form ref="formRef" :model="news" :rules="rules" label-width="100px">
        <el-form-item label="新闻标题" prop="title">
          <el-input v-model="news.title"></el-input>
        </el-form-item>
        <el-form-item label="新闻内容">
          <el-input type="textarea" v-model="news.content"></el-input>
        </el-form-item>
        <el-form-item label="新闻类型" prop="category">
            <el-select v-model="news.category" placeholder="请选择新闻类型">
              <el-option
                v-for="item in categoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="新闻日期">
            <el-date-picker v-model="news.value1" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
        <el-form-item label="新闻图片">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="handleImageChange"
            :file-list="imageList"
          >
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
  
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">发布</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </template>
  
  <script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import type { ElUpload,UploadFile } from 'element-plus';

export default defineComponent({
  name: 'NewsForm',
  setup() {
    const formRef = ref();
    const news = reactive({
      title: '',
      content: '',
      pic: '',
      value1: '',
      category: ''
    });
    const rules = reactive({
      title: [{ required: true, message: '请输入新闻标题', trigger: 'blur' }],
      content: [{ required: true, message: '请输入新闻内容', trigger: 'blur' }],
    });
    const categoryOptions = [
      { value: '通知公告', label: '通知公告' },
      { value: '活动预告', label: '活动预告' },
      { value: '学术交流', label: '学术交流' },
      { value: '工作通知', label: '工作通知' },
      // 可以添加更多选项
    ];
    const imageList = ref<UploadFile[]>([]);

    const handleImageChange = (file: UploadFile, fileList: UploadFile[]) => {
        imageList.value = fileList;;
    };

    const submitForm = async () => {
      try {
        await formRef.value.validate();

        let formData = new FormData();
        formData.append('title', news.title);
        formData.append('content', news.content);
        formData.append('date', news.value1);
        formData.append('class', news.category);
        if (imageList.value.length > 0) {
          formData.append('image', imageList.value[0].raw!);
        }

        const response = await axios.post('http://127.0.0.1:5000/insert_new', formData, {
          headers: { 'Content-Type': 'multipart/form-data' }
        });

        ElMessage.success('新闻发布成功');

      } catch (error) {
        ElMessage.error('新闻发布失败');
      }
    };

    const resetForm = () => {
      formRef.value.resetFields();
    };

    return {
      formRef,
      news,
      rules,
      submitForm,
      resetForm,
      imageList,
      handleImageChange,
      categoryOptions,
    };
  },
});
  </script>
  
  <style>
  body1, html1 {

    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .news-form1 {
    width: 750px;
    height: 70%;
    margin: 0 auto;
    padding: 20px;
    background-color: white; /* 添加背景色以区别于页面其他部分 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  }
  </style>